<template>
    <view :style="{ '--color': color }">
        <status-bar :title="title"></status-bar>

        <view class="Wrapper">
            <text class="black size32">上传小店码</text>
            <view class="uploadBox"></view>
            <text class="black size32 m-top50">商品ID</text>
            <input type="text" class="productId" />

            <view class="foter">
                <view class="list Cancel">取消</view>
                <view class="list getBtn">获取信息</view>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                title: '推客中心'
            };
        },
        methods: {},
        computed: {
            ...mapState(['color'])
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $page;
    }
</style>
<style lang="scss" scoped>
    .Wrapper {
        width: 640rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin: 100rpx auto 0;
        padding: 50rpx 20rpx 30rpx 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .uploadBox {
            width: 250rpx;
            height: 220rpx;
            border: 1px solid #f1f1f1;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30rpx;
        }
        .productId {
            width: 360rpx;
            height: 80rpx;
            border: 1px solid #f1f1f1;
            margin-top: 20rpx;
            border-radius: 10rpx;
            text-align: center;
            padding: 0 20rpx;
        }
        .foter {
            width: 100%;
            display: flex;
            justify-content: space-around;
            margin-top: 40rpx;
            .list {
                width: 250rpx;
                height: 80rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                font-size: 28rpx;
                border-radius: 10rpx;
            }
            .Cancel {
                background-color: #666666;
            }
            .getBtn {
                background-color: var(--color);
            }
        }
    }
</style>
